<!-- 路由器,linux,pc质押 -->
<template>

  <div class="pag" >
    <div class="pledge-main">
      <cube-sticky :pos="scrollY">
      <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll"
                   :scroll-events="['scroll']"
                   @scroll="scrollY = -$event.y">
      <div class="pledge-banner" :class="{'router-pledge': type == 'router',
                                          'linux-pledge': type == 'linux',
                                          'pc-pledge': type == 'pc'}">
        <h3>{{ typeNames[type] }}挖矿令牌质押</h3>
        <div class="pledge-banner-content">
          <div>绑定的<i style="color:#FF1140;">{{ nodeNum }}</i>个节点中</div>
          <div>共<i style="color:#E1EE10;">{{ nodePledgeNum }}</i>个节点质押了令牌</div>
        </div>
      </div>
      <div class="token-types">
        <img src="~assets/images/token/token-x.png" alt="">
        自有闲置令牌：{{ tokenInfo.num.idleNum }}
        <span></span>
        <div style="display: flex;align-items: center" :style="{opacity: (tokenInfo.rentNum.idleNum + tokenInfo.rentNum.miningNum) ? 1 : 0}">
          <img src="~assets/images/token/token-z.png" alt="">
          租借闲置令牌：{{ tokenInfo.rentNum.idleNum }}
        </div>
      </div>
<!--      <div class="tips" v-show="type != 'router'">今日Linux和客户端全网可新增<i>{{ tokenInfo.todayCanPledgeNum }}</i>块令牌</div>-->
      <div class="device-pledge-list" v-if="list && list.length > 0">
        <div class="m-table">
          <cube-sticky-ele>
          <div class="m-table-head">
            <div class="m-table-row">
              <div class="m-table-cell">序号</div>
              <div class="m-table-cell">节点名称</div>
              <div class="m-table-cell">令牌质押状态</div>
              <div class="m-table-cell">操作</div>
            </div>
          </div>
          </cube-sticky-ele>
          <div class="m-table-body">
              <div class="m-list">
                <div class="m-table-row" v-for="(item, index) in list">
                  <div class="m-table-cell">{{ nodeNum - index }}</div>
                  <div class="m-table-cell">
                    {{ item.name }}
                    <div v-if="item.miningStatus == 0" class="tag danger">未开启</div>
                    <div v-if="item.miningStatus == 1" class="tag success">已开启</div>
                    </div>
                  <div class="m-table-cell">
                    <div class="token-icon" :class="statusObj[item.status]"></div>
                  </div>
                  <div class="m-table-cell">
                    <div class="token-action" :class="typeObj[item.status]"
                         @click="tokenPledgeItemHandle(item)"></div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
        <!-- 空数据展示页 -->
        <list-empty txt="暂无绑定节点" v-if="list && list.length == 0">
          <div>请绑定节点后再质押令牌</div>
        </list-empty>
<!--        <div class="empty-list" v-if="list && list.length == 0">-->
<!--          <img src="~assets/images/empty.png" alt="">-->
<!--          <p>暂无绑定节点</p>-->
<!--          <div>请绑定节点后再质押令牌</div>-->
<!--        </div>-->
      </cube-scroll>
      </cube-sticky>
    </div>
    <div class="pledge-actions">
      <div @click="tokenPledgeAllHandle('pledge')" v-if="list && list.length">令牌质押到所有节点</div>
      <div @click="tokenPledgeAllHandle('revoke')" v-if="list && list.length">撤销所有节点令牌</div>
    </div>
    <!-- 选择质押令牌种类 -->
    <alert ref="tokenPopup" title="选择质押令牌种类" @mask-click="tokenPopupMaskClick">
      <div class="select-token">
        <input type="checkbox" class="f-checkbox" v-model="useBorrow">
        优先质押租用令牌，此次质押不再提示
      </div>
      <template v-slot:footer>
        <div class="use-tokens">
          <div @click="tokenTypeChoose(1)">自有令牌</div>
          <div @click="tokenTypeChoose(0)">租用令牌</div>
        </div>
      </template>
    </alert>
    <!-- 提示框 -->
    <alert ref="tipPopup">
      <div v-if="curTip == 1">今日全网路由器令牌<br>新增放置名额已满无法质押令牌</div>
      <div v-if="curTip == 2">今日全网路由器令牌<br>新增放置名额已满<br>您有<i style="color: #DC0630">{{ todayNode }}</i>个节点无法质押令牌</div>
      <div v-if="curTip == 3">闲置令牌已质押完毕<br>仍有<i style="color: #00A989">{{ todayNode }}</i>个节点没有质押令牌</div>
      <div v-if="curTip == 4" class="tipPopup-p">{{ tip4 }}</div>
    </alert>
  </div>

</template>



<script>
    import { getTokenNodeList, pledgeToken, getPledgeInfo } from 'api'
    import alert from 'cpnts/alert.vue'
    import listEmpty from 'cpnts/list-empty.vue'


  export default {
      components: {
          'alert': alert,
          'listEmpty': listEmpty,
      },
    data() {
      return {
          pledgeInfo: null,
          isDoActioning: false,
          isTokenActionTransaction: false,
          curTokenData: null,
          useBorrow: false,
          //emptyNode: 18,
          tip4: '',
          curTip: 3,
          showChooseTokenPopup: true,
          scrollY: 0,
          typeNames: {
              router: '路由器',
              linux: 'Linux',
              pc: '客户端',
          },
          typeValues: {
              router: 3,
              linux: 2,
              pc: 1,
          },
          type: 'router',
          options: {
              pullUpLoad: true
          },
          typeObj: {
              "1": ["pledge-item-action"],
              "20": ["revoke-item-action"],
              "3": ["revoke-item-action"]
          },
          statusObj: {
            "20": ["token-x"],
              "3": ["token-z"],
              "1": ["token-k"]
          },
          list: null
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
          vm.resetData()
        vm.type = to.query.type
          vm.getPledgeInfo()
          vm.getData()
      })
    },
      watch: {
          isDoActioning(val){
              if(val){
                  this.$loading('处理中..')
              }else{
                  this.$loadingHide()
              }
          }
      },
      computed: {
          todayNode(){
              let {nodeNum, nodePledgeNum} = this
              return  nodeNum - nodePledgeNum
          },
          isShowTip3(){
              let {nodeNum, nodePledgeNum, tokenInfo} = this
              let {todayCanPledgeNum} = tokenInfo
              return todayCanPledgeNum > 0 && (nodeNum - nodePledgeNum) > 0
          },
          isShowTip2(){
              let {num, todayCanPledgeNum} = this.tokenInfo
              return todayCanPledgeNum == 0 && num.idleNum > 0
          },
          hasBorrow(){
              let {miningNum, idleNum} = this.tokenInfo.rentNum
              return idleNum > 0
          },
          idleNum(){
              let {rentNum, num} = this.tokenInfo
              return rentNum.idleNum + num.idleNum
          },
          nodeNum(){
              let {type, tokenInfo} = this
              return tokenInfo[type].nodeNum
          },
          nodePledgeNum(){
              let {type, tokenInfo} = this
              return tokenInfo[type].nodePledgeNum
          },
          tokenInfo(){
              return  this.pledgeInfo || this.$store.state.tokenInfo
          },
          tipContent(){

          }
      },
    mounted(){
      //this.$refs.tokenPopup.show()
    },
    methods: {
        async getPledgeInfo(){
            let {data} = await getPledgeInfo(this.typeValues[this.type])
            this.pledgeInfo = data
        },
          resetData(){
              this.hideTipPopup()
              this.hideTokenPopup()
              this.list = null
              this.isTokenActionTransaction = false
              this.isDoActioning = false
              this.useBorrow = false
              this.scrollY= 0
          },
        tokenPopupMaskClick(){
            this.isTokenActionTransaction = false
        },
        tokenPledgeAllHandle(action){
          /*if (action == 'pledge') {
            this.$warn('功能暂不可用！');
            return;
          }*/
          this.tokenPledgeHandle({
              action,
              //item: null,
              params: {
                  tokenType: 0,
                  nodeId: 0
              }
          })
        },
        tokenPledgeItemHandle(item){
            let {status, node_id, tokenType} = item
            let action = status == 1 ? 'pledge' : 'revoke'
            // if(action == 'pledge' && this.tokenInfo.todayCanPledgeNum == 0){
            //     this.curTip = 1
            //     this.showTipPopup()
            //     return
            // }
            /*if (action == 'pledge') {
              this.$warn('功能暂不可用！');
              return;
            }*/
            this.tokenPledgeHandle({
              action,
              item,
              params: {
                tokenType: status == 20 ? 1 : 0,
                nodeId: node_id
              }
            })
            /*this.tokenPledgeHandle({
                action,
                item,
                params: {
                    tokenType: status == 2 ? 1 : 0,
                    nodeId: node_id
                }
            })*/
        },
        tokenPledgeHandle(data){
            let {item, params, action} = data
            if(!this.idleNum && action == 'pledge'){
                return this.$warn('没有可质押的令牌')
            }
            if(this.isTokenActionTransaction){
                return
            }
            this.isTokenActionTransaction = true
            //debugger
            if(action == 'pledge'){
                if(item){
                    //质押单个
                    if(this.hasBorrow){
                        if(this.useBorrow){
                            params.tokenType = 0
                            this.pledgeRevokeTokenAction(data)
                        }else{
                            this.curTokenData = data
                            this.showTokenPopup()
                        }
                    }else {
                        params.tokenType = 1
                        this.pledgeRevokeTokenAction(data)
                    }
                }else{
                    //质押所有
                    this.pledgeRevokeTokenAction(data)
                }
            } else {
                //撤销质押
                this.pledgeRevokeTokenAction(data)
            }
        },
        async pledgeRevokeTokenAction({item, params, action}){
            let source = action == 'pledge' ? 0 : 1
            this.isDoActioning = true
            try {
                let payload = Object.assign(
                    {
                        type: this.typeValues[this.type],
                        source
                    }, params)
                //debugger
                let {data} = await pledgeToken(payload)
                    if(item){
                      item.status = action == 'pledge' ?  (params.tokenType ? 20 : 3  ) : 1
                    }
                    /* 20200515修改  if(item){
                        item.status = action == 'pledge' ?  (params.tokenType ? 2 : 3  ) : 1
                    }  20200515修改 */
                //this.isTokenActionTransaction = false
                // this.$store.dispatch('getTokenInfo').then(()=>{
                //     this.pledgeActionResultTip(action, item)
                // })
                this.$suc(action == 'pledge' ? '质押成功！' : '撤销成功!')
            }catch (e) {
                //this.$warn(e.info || '操作超时')
                this.curTip = 4
                this.tip4 = e.info || '操作超时'
                this.showTipPopup()
            }
            if(!item){
                this.getData()
            }
            this.isDoActioning = false
            this.isTokenActionTransaction = false
            //this.$store.dispatch('getTokenInfo')
            this.getPledgeInfo()
        },
        pledgeActionResultTip(action, item){
          if(action == 'pledge' && !item){
              this.$once('pledgeActionResult', ()=>{
                  let {isShowTip2, isShowTip3} = this
                  if(isShowTip2){
                      this.curTip = 2
                      this.showTipPopup()
                  }else if(isShowTip3){
                      this.curTip = 3
                      this.showTipPopup()
                  }
              })
          }
        },
        tokenTypeChoose(tokenType){
              this.hideTokenPopup()
            this.curTokenData.params.tokenType = tokenType
          this.pledgeRevokeTokenAction(this.curTokenData)
        },
        hideTipPopup(){
            this.$refs.tipPopup.hide()
        },
        showTipPopup(){
            this.$refs.tipPopup.show()
        },
        showTokenPopup(){
            this.$refs.tokenPopup.show()
        },
        hideTokenPopup(){
            this.$refs.tokenPopup.hide()
        },
        scrollHandler({ y }) {
            this.scrollY = -y
        },
        getPledgeStatus(status){

        },
        async onPullup(){
            let me = this
            let sc = this.$refs.scroll
            if(this.list.length < 20){
                return this.getData()
            }
            let pagec = Math.floor((this.list.length - 20) / 20) + 1
            let pagey = (this.list.length - 20) % 20

            try {
                let {data} =  await getTokenNodeList(
                    {
                        type: this.typeValues[this.type],
                        per: 20,
                        page: 1 + pagec
                    }
                )
                if(!data){
                    sc.forceUpdate()
                    return
                }
                if(pagey){
                    data.splice(0, pagey)
                }
                me.list = me.list.concat(data)
                if(!data.length){
                    sc.forceUpdate()
                }else{
                    this.$nextTick(()=>{
                        sc.forceUpdate(true)
                    })
                }
            } catch (e) {
                this.$warn(e.info)
                sc.forceUpdate()
            }


        },
        async getData(){
            let sc = this.$refs.scroll
            try {
                let {data} = await getTokenNodeList({
                    type: this.typeValues[this.type],
                    per: 20,
                    page: 1
                })
                if(!data){
                    this.list = []
                    sc.forceUpdate()
                    return
                }
                this.list = data
                this.$nextTick(()=>{
                    sc.forceUpdate(true)
                })
            }catch (e) {
                this.$warn(e.info)
                sc.forceUpdate()
            }

        }
    }
  }
</script>





<style lang="scss" scoped>

  .pag {
    background: #F5F5FB;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .pledge-main {
    flex: 1;
    overflow: hidden;
  }

  .pledge-banner {
    //width:690px;
    height:266px;
    border-radius:14px 14px 0px 0px;
    margin: 34px 30px 0 30px;
    padding-top: 56px;
    h3 {
      padding-right: 68px;
      font-size:40px;
      font-weight:600;
      color:rgba(255,255,255,1);
      text-shadow:0px 2px 4px rgba(0,89,240,0.5);
      margin-bottom: 16px;
      text-align: right;
    }
  }

  .pledge-banner-content {
    width:360px;
    height:100px;
    background:rgba(255,255,255,.2);
    border-radius:10px;
    margin-right: 64px;
    margin-left: auto;
    text-align: center;
    padding-top: 16px;
    font-size: 26px;
    color: #fff;
    div {
      margin-bottom: 16px;
      i {
        padding: 0 5px;
        font-style: normal;
      }
    }
  }



  .router-pledge {
    background: url("~assets/images/token/router.png") 24px center / 174px 174px no-repeat,
    linear-gradient(210deg,rgba(73,189,250,1) 0%,rgba(43,117,243,1) 100%);
  }


  .linux-pledge {
    background: url("~assets/images/token/linux.png") 24px center / 174px 174px no-repeat,
    linear-gradient(210deg,rgba(171,133,254,1) 0%,rgba(121,94,255,1) 100%);
  }


  .pc-pledge {
    background: url("~assets/images/token/pc.png") 24px center / 174px 174px no-repeat,
    linear-gradient(210deg,rgba(49,236,203,1) 0%,rgba(37,189,255,1) 100%);
  }



  .token-types {
    height: 104px;
    background: #fff;
    font-size:30px;
    color:rgba(29,40,88,1);
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 58px;
      height: 58px;
      margin-right: 12px;
    }
    span {
      margin-right: 38px;
    }
  }

  .tips {
    font-size:26px;
    color:rgba(113,118,140,1);
    display: flex;
    align-items: center;
    justify-content: center;
    //height: 80px;
    margin: 28px 0;
    i {
      color: #00A989;
      padding: 0 5px;
      font-style: normal;
    }
    &:before {
      margin-right: 13px;
      flex: 1;
      content: '';
      height:2px;
      background:rgba(205,207,217,1);
      display: inline-block;
    }
    &:after {
      margin-left: 13px;
      flex: 1;
      content: '';
      height:2px;
      background:rgba(205,207,217,1);
      display: inline-block;
    }
  }

  .device-pledge-list {
      margin-top: 28px;
  }

  .pledge-actions {
    padding: 30px 0 45px 0;
    display: flex;
    justify-content: center;
    div {
      width:330px;
      height:84px;
      background:rgba(23,62,143,1);
      border-radius:10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:32px;
      color:rgba(255,255,255,1);
      margin-right: 30px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }


  .m-table {
    height: 100%;
    color: #202C5B;
  }

  .m-table-head {
    //height: 88px;
    .m-table-row {
      height: 72px;
      .m-table-cell{
        &:nth-of-type(2) {
          padding-left: 66px;
        }
      }
    }
  }

  .m-table-body {
    height: calc(100% - 88px);
  }

  .m-table-row {
    display: flex;
    align-items: center;
    //margin-top: 8px;
    background: #fff;
    height: 96px;
    padding: 0 30px;
    border-top: 2px solid #F5F5F5;
  }

  .m-table-cell{
    display: flex;
    align-items: center;
    &:nth-of-type(1) {
      max-width: 11%;
      width: 11%;
      justify-content: start;
    }
    &:nth-of-type(2) {
      max-width: 38%;
      width: 38%;
      //overflow: hidden;
      //justify-content: start;
      align-items: flex-start;
      flex-wrap: wrap;
      flex-direction: column;
      padding-left: 30px;
    }
    &:nth-of-type(3) {
      max-width: 30%;
      width: 30%;
      justify-content: center;
    }
    &:nth-of-type(4) {
      max-width: 22%;
      width: 22%;
      justify-content: flex-end;
    }
  }


  .token-icon {
    width: 62px;
    height: 74px;
    background: center center / contain no-repeat;
  }

  .token-x {
    //height: 60px;
    background-image: url("~assets/images/token/token-x2.png");
  }

  .token-z {
    //height: 60px;
    background-image: url("~assets/images/token/token-z2.png");
  }

  .token-k {
    //height: 16px;
    background-image: url("~assets/images/token/token-k.png");
  }

  .token-action {
    width:150px;
    height:60px;
    border:2px solid;
    border-radius:8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:26px;
  }

  .pledge-item-action {
    border-color: #00A989;
    color: #00A989;
    &:before {
      content: '质押令牌';
      display: inline;
    }
  }

  .revoke-item-action {
    border-color: #DC0630;
    color: #DC0630;
    &:before {
      content: '撤销令牌';
      display: inline;
    }
  }

  .tipPopup-p {
    padding: 0 30px;
  }



</style>

<style lang="scss" scoped>

  .select-token {
    font-size:26px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .use-tokens {
    display: flex;
    height: 100%;
    div {
      flex: 1;
      border-right: 2px solid #D0D4E4;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .f-checkbox {
    width: 34px;
    height: 34px;
    margin-right: 24px;
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
    background: url("~assets/images/token/uncheck.png") center center/contain no-repeat;
    &:before {
      content: '';
      width: 0;
      height: 0;
      background-image: url("~assets/images/token/check.png");
    }
    &:checked {
      background-image: url("~assets/images/token/check.png");
    }
  }

  .empty-list {
    img {
      display: block;
      height: 274px;
      width: 250px;
      margin: 175px auto 84px auto;
    }
    p {
      font-size:36px;
      font-weight:600;
      color:rgba(113,118,140,1);
      text-align: center;
      margin-bottom: 35px;
    }
    div {
      text-align: center;
      font-size:26px;
      color:rgba(113,118,140,1);
    }
  }


  .tag {
    min-width: 73px;
    width:73px;
    height:30px;
    border-radius:4px;
    font-size:20px;
    //font-weight:500;
    color:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    margin-top: 8px;
    //margin-bottom: 8px;
    &.warning {
      background:rgba(247,163,16,1);
    }
    &.success {
      background:#10D592;
    }
    &.danger {
      background:#EB3257;
    }
    &.info {
      background:#697a9b;
    }
  }



</style>











